/* 基础组件 样式 */
.mask {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
}

.ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ellipsis-2 {
	display: -webkit-box;
	overflow: hidden;
	white-space: normal !important;
	text-overflow: ellipsis;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.opcity {
	opacity: 0.5;
}

.scale-small {
	transform: scale(0.9);
	transform-origin: center center;
}

.height-full {
	height: 100%;
}

.width-full {
	width: 100%;
}

.ptop-zero {
	padding-top: 0;
}

.pbottom-zero {
	padding-bottom: 0;
}

.pleft-zero {
	padding-left: 0;
}

.pright-zero {
	padding-right: 0;
}

.col-12 {
	width: 100%;
}

.col-11 {
	width: 91.66666667%;
}

.col-10 {
	width: 83.33333333%;
}

.col-9 {
	width: 75%;
}

.col-8 {
	width: 66.66666667%;
}

.col-7 {
	width: 58.33333333%;
}

.col-6 {
	width: 50%;
}

.col-5 {
	width: 41.66666667%;
}

.col-4 {
	width: 33.33333333%;
}

.col-3 {
	width: 25%;
}

.col-2 {
	width: 16.66666667%;
}

.col-1 {
	width: 8.33333333%;
}


/* flex start*/

.flex {
	display: -webkit-flex;
	display: flex;
}

.flex-1 {
	flex: 1;
}

.align-center {
	justify-content: center;
}

.align-left {
	justify-content: flex-start !important;
}

.align-right {
	justify-content: flex-end !important;
}

.align-between {
	justify-content: space-between !important;
}
 
.align-around {
	justify-content: space-around !important;
}

.vertical-center {
	align-items: center;
}

.vertical-top {
	align-items: flex-start;
}

.vertical-bottom {
	align-items: flex-end;
}

.line-feed {
	flex-direction: row;
	flex-wrap: wrap;
}

.flex-column{
	display: flex;
	flex-direction: column;
}

.operation-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
}

/* list start*/

.list-title {
	width: 100%;
	padding: 25rpx 30rpx;
	box-sizing: border-box;
	font-size: 28rpx;
	line-height: 1;
	color: #999;
}

.list-content {
	width: 100%;
	position: relative;
}

.list-content::before {
	content: " ";
	position: absolute;
	top: -1rpx;
	right: 0;
	left: 0;
	border-top: 1rpx solid #eaeef1;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
}

.list-content::after {
	content: '';
	position: absolute;
	border-bottom: 1rpx solid #eaeef1;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	bottom: 0;
	right: 0;
	left: 0;
}

.border-top::after {
	border-top: 0;
}

.border-bottom::after {
	border-bottom: 0;
}

.border-all::after {
	border: 0;
}

.list-cell {
	position: relative;
	background: #fff;
	width: 100%;
	padding: 26rpx 30rpx;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.list-cell.padding-small {
	padding: 24rpx 30rpx;
}

.cell-hover {
	background: #f7f7f9 !important;
}

.list-cell::after {
	content: '';
	position: absolute;
	border-bottom: 1rpx solid #eaeef1;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	bottom: 0;
	right: 0;
	left: 30rpx;
}

.cell-last::after {
	border-bottom: 0 !important;
}

.list-cell.cell-arrow:before {
	content: " ";
	height: 11px;
	width: 11px;
	border-width: 2px 2px 0 0;
	border-color: #b2b2b2;
	border-style: solid;
	-webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
	transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
	position: absolute;
	top: 50%;
	margin-top: -7px;
	right: 30rpx;
}


.hairline--top{
	position: relative;
	&::before{
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		top: 0;
		right: 0;
		left: 0;
	}
}

.hairline--bottom{
	position: relative;
	&::after{
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}
}


// 外间距
.ml-5{
	margin-left: 5rpx;
}

.ml-10{
	margin-left: 10rpx;
}

.ml-15{
	margin-left: 15rpx;
}

.ml-20{
	margin-left: 20rpx;
}

.ml-30{
	margin-left: 30rpx;
}


.mr-5{
	margin-right: 5rpx;
}

.mr-10{
	margin-right: 10rpx;
}

.mr-15{
	margin-right: 15rpx;
}

.mr-20{
	margin-right: 20rpx;
}

.mr-30{
	margin-right: 30rpx;
}

.mt-5{
	margin-top: 5rpx;
}

.mt-10{
	margin-top: 10rpx;
}

.mt-15{
	margin-top: 15rpx;
}

.mt-20{
	margin-top: 20rpx;
}

.mt-30{
	margin-top: 30rpx;
}


.mb-5{
	margin-bottom: 5rpx;
}

.mb-10{
	margin-bottom: 10rpx;
}

.mb-15{
	margin-bottom: 15rpx;
}

.mb-20{
	margin-bottom: 20rpx;
}

.mb-25{
	margin-bottom: 25rpx;
}

.mb-30{
	margin-bottom: 30rpx;
}

// 字号

.fn-w{
	font-weight: bold;
}

.fn-22{
	font-size: 22rpx !important;
	line-height: 22rpx !important;
}

.fn-25{
	font-size: 25rpx !important;
	line-height: 25rpx !important;
}

.fn-30{
	font-size: 30rpx !important;
	line-height: 30rpx !important;
}

.fn-32{
	font-size: 32rpx !important;
	line-height: 32rpx !important;
}

.fn-34{
	font-size: 34rpx !important;
	line-height: 34rpx !important;
}

.fn-36{
	font-size: 36rpx !important;
	line-height: 36rpx !important;
}


// 颜色
.color-main{
	color: $color-main;
}

.bg-color-main{
	background-color: $bg-color-main;
	color: $color-white;
}

.color-red{
	color: $color-red;
}

.color-primary{
	color: $color-primary;
}

.color-grey{
	color: $text-color-grey;
}


// 页面容器兼容苹果x内边距
.box-padding{
	padding: var(--px);
	padding-bottom: calc(env(safe-area-inset-bottom) + var(--px));
}
